﻿@using GlobalResources
@using System.Globalization
@using Microsoft.Azure.Devices.Applications.RemoteMonitoring.Common.Helpers
@using Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Infrastructure.Models
@using Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Web.Helpers
@using Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Web.Models
@model Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Web.Models.EditDevicePropertiesModel

@{
    ViewBag.Title = @Strings.EditDeviceProperties;
    Layout = "~/Views/Shared/_LayoutNoNavigation.cshtml";
}

<header class="header_main">
    <button class="header_main__button_back" type="button" data-bind="click: backButtonClicked"></button>
    <h2 class="header_main__subhead header_main__subhead--large">@string.Format(Strings.EditIconFor, Model.DeviceId)</h2>
</header>
<div class="content_outer">

    <div class="content_inner">
        <div id="content">
            <form id="deviceIconForm" action="" enctype="multipart/form-data">
                <div class="device_icon_action_container">
                    <div style="margin-right:10px">
                        <label class="edit_form__label device_icon_label">
                            <input type="radio" name="actionType" value="Upload" data-bind='checked: actionType' />
                            @Strings.UploadNewIconLabel
                        </label>
                    </div>
                    <div class="device_icon_action_upload">
                        <input type="text" id="filePathBox" class="edit_form__file" placeholder="@Strings.OpenImageTooltip" disabled="disabled">
                        <input type="file" id="file" class="device_icon_file" size="1" accept="image/gif, image/jpeg, image/png" hidefocus>
                        <button id="chooseFileBtn" class="button_base devicelist_toolbar_button devicelist_toolbar_button_gray device_icon_button_open_image">@Strings.ChooseFileLabel</button>
                    </div>
                    <div id="progressBar"></div>
                    <p class="device_icon_preview_tooptip">@Strings.ImageSizeSuggestions</p>
                    <p class="edit_form__label">@Strings.PreviewImage</p>
                    <img id="previewImage" class="device_icon_preview_image" data-bind="attr: {src: previewIcon().url } " />
                </div>
                <div class="device_icon_action_container" data-bind='visible: iconList().length > 0'>
                    <div>
                        <label class="edit_form__label device_icon_label">
                            <input type="radio" name="actionType" value="Apply" data-bind='checked: actionType' />
                            @Strings.ApplyExistingIconLabel
                        </label>
                    </div>
                    <div class="device_icon_list">
                        <div class="device_icon_nav_container">
                            <!--ko if: isFirstPage() -->
                            <img class="device_icon_nav_image device_icon_nav_image_disabled" title="@Strings.Previous" src="~/Content/img/button_page_prev.svg" />
                            <!-- /ko -->
                            <!--ko ifnot: isFirstPage() -->
                            <a data-bind="click: previousPage"><img class="device_icon_nav_image" title="@Strings.Previous" src="~/Content/img/button_page_prev.svg" /></a>
                            <!-- /ko -->
                        </div>
                        <div class="device_icon_list_container" id="imageListContainer" data-bind="foreach: iconList ">
                            <div class="device_icon_apply_image_container">
                                <img class="device_icon_apply_image" data-bind="attr: {id: name, src: blobUrl }, click: $parent.selectIcon" />
                                <a class="device_icon_apply_image_delete_link">
                                    <img title="@Strings.DeleteIconTooltip" class="device_icon_apply_image_delete_icon" src="~/Content/img/column_delete.svg" data-bind="click: $parent.deleteIcon" />
                                </a>
                            </div>
                        </div>
                        <div class="device_icon_nav_container">
                        <!--ko if: isLastPage() -->
                           <img class="device_icon_nav_image device_icon_nav_image_disabled" title="@Strings.Next" src="~/Content/img/button_page_next.svg" />
                        <!-- /ko -->
                        <!--ko ifnot: isLastPage() -->
                            <a data-bind="click: nextPage"><img class="device_icon_nav_image" title="@Strings.Next" src="~/Content/img/button_page_next.svg" /></a>
                        <!-- /ko -->
                        </div>
                    </div>
                </div>

                <div class="device_icon_action_container" data-bind="visible: removable">
                    <div>
                        <label class="edit_form__label device_icon_label">
                            <input type="radio" name="actionType" value="Remove" data-bind='checked: actionType' />
                            @Strings.RemoveCurrentIconLabel
                        </label>
                    </div>
                    <img id="currentImage" class="device_icon_current_image" data-bind="attr: { src: currentIcon().blobUrl }" />
                </div>
                <fieldset class="fieldset_button">
                    <button id="cancelBtn" class="button_base button_secondary button_cancel button_no_left_margin" data-bind="click: backButtonClicked">@Strings.Cancel</button>
                    <button id="saveBtn" class="button_base" data-bind="enable: canSave">@Strings.Save</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>


<script type="text/javascript">
    "use strict";

    var resources = {
        redirectUrl: '@Url.Action("Index", "Device")',
        overSizedFile: '@Html.JavaScriptString(Strings.OverSizedFile)',
        uploadActionType: '@Html.JavaScriptString(IconActionType.Upload.ToString())',
        applyActionType: '@Html.JavaScriptString(IconActionType.Apply.ToString())',
        removeActionType: '@Html.JavaScriptString(IconActionType.Remove.ToString())',
        iconTagName: '@Html.JavaScriptString(Constants.DeviceIconTagName)',
        failedToUploadImage: '@Html.JavaScriptString(Strings.FailedToUploadImage)',
        failedToUpdateTwin: '@Html.JavaScriptString(Strings.FailedToUpdateTwin)',
        failedToDeleteIcon: '@Html.JavaScriptString(Strings.FailedToDeleteIcon)'
    }
</script>
<script type="text/javascript" src="~/Scripts/Views/Device/EditIcon.js?ver=@Constants.JSVersion"></script>
<script type="text/javascript">
    $(document).ready(function () {
        IoTApp.EditIcon.init("@Model.DeviceId",@(Model.IsSimulatedDevice?"true":"false"));
    });

</script>

